<template>
<div>
  <el-row>
    <el-col :span="2" class="height40">
      选择车辆:
    </el-col>
    <el-col :span="6">
      <el-select v-model="truck" filterable placeholder="请选择" @change="selTruck">
        <el-option v-for="truck in trucks" 
        :key="truck.truckId" 
        :label="truck.truckNumber" 
        :value="truck.truckId">
        </el-option>
      </el-select>
    </el-col>
    <el-col :span="2" class="height40">
      日期范围:
    </el-col>
    <el-col :span="14">
      <el-date-picker @change="selTruck" 
      v-model="date" type="daterange" 
      value-format="yyyy-M-d"
      range-separator="至" 
      start-placeholder="开始日期" 
      end-placeholder="结束日期">
    </el-date-picker>
    </el-col>
  </el-row>
  <el-table :data="dispatch" style="width: 100%" height="500" @row-dblclick="disDetails">
    <el-table-column prop="truckId" label="车辆ID"></el-table-column>
    <el-table-column prop="truckNumber" label="车牌号"></el-table-column>
    <el-table-column prop="nowSite" label="始发站"></el-table-column>
    <el-table-column prop="endSite" label="终点站"></el-table-column>
    <el-table-column prop="disTime" label="调度时间"></el-table-column>
  </el-table>
  <el-dialog title="调度携带运单" :visible.sync="dialogVisible" width="70%" :before-close="handleClose">
    <el-table v-if="documents.length>0" :data="documents" style="width: 100%" height="400">
      <el-table-column prop="docId" label="单号"></el-table-column>
      <el-table-column prop="docDate" label="开单日期"></el-table-column>
      <el-table-column prop="docStart" label="开单网点"></el-table-column>
      <el-table-column prop="docEnd" label="终点站"></el-table-column>
    </el-table>
  </el-dialog>
</div>
</template>

<script>
import {getTruck,selDispatch} from 'network/truck'
import {getDocByDisId} from 'network/document'

export default {
  data() {
    return {
      dialogVisible: false,
      trucks: [],
      dispatch: [],
      documents: [],
      truck: '',
      date:''
    }
  },
  methods: {
    selTruck() {
      if(this.truck == '' || this.truck == null) {
        this.$message({
          showClose: true,
          message: '请先选择车辆',
          type: 'error'
        });
        return false
      }
      if(this.date == '' || this.date == null) {
        selDispatch({truckId:this.truck}).then(res => {
          this.dispatch = res
        })
      }else {
        selDispatch({truckId:this.truck,startTime:this.date[0],endTime:this.date[1]}).then(res => {
          this.dispatch = res
        })
      }
    },
    disDetails(row) {
      getDocByDisId(row.dispatchId).then(res => {
        this.documents.splice(0)
        for(let d of res) {
          this.documents.push(d.document)
        }
        this.dialogVisible = true
        console.log(this.documents)
      }) 
    }
  },
  mounted() {
    getTruck().then(res => {
      this.trucks = res
    })
  }
}
</script>

<style scoped>
</style>
